<template>
  <div>
    <h1>数据生成器</h1>

    <div class="generator-container">
      <h2>生成事件数据</h2>
      <div class="input-group">
        <label for="incident-count">事件数量:</label>
        <input type="number" id="incident-count" min="1" v-model.number="dataCount">
        <button @click="generateData('data')">生成事件</button>
      </div>
      <div class="result">{{ dataResult }}</div>
    </div>

    <div class="generator-container">
      <h2>生成巡检点数据</h2>
      <div class="input-group">
        <label for="patrol-point-count">巡检点数量:</label>
        <input type="number" id="patrol-point-count" min="1" v-model.number="patrol_pointCount">
        <button @click="generateData('patrol-point')">生成巡检点</button>
      </div>
      <div class="result">{{ patrol_pointResult }}</div>
    </div>

    <div class="generator-container">
      <h2>生成巡检点集合数据</h2>
      <div class="input-group">
        <label for="patrol-point-collection-count">巡检点集合数量:</label>
        <input type="number" id="patrol-point-collection-count" min="1" v-model.number="patrol_point_collectionCount">
        <button @click="generateData('patrol-point-collection')">生成巡检点集合</button>
      </div>
      <div class="result">{{ patrol_point_collectionResult }}</div>
    </div>

    <div class="generator-container">
      <h2>生成装备数据</h2>
      <div class="input-group">
        <label for="equipment-count">装备数量:</label>
        <input type="number" id="equipment-count" min="1" v-model.number="equipmentCount">
        <button @click="generateData('equipment')">生成装备</button>
      </div>
      <div class="result">{{ equipmentResult }}</div>
    </div>

    <div class="generator-container">
      <h2>生成警员数据</h2>
      <div class="input-group">
        <label for="officer-count">警员数量:</label>
        <input type="number" id="officer-count" min="1" v-model.number="officerCount">
        <button @click="generateData('officer')">生成警员</button>
      </div>
      <div class="result">{{ officerResult }}</div>
    </div>

    <div class="generator-container">
      <h2>生成用户数据</h2>
      <div class="input-group">
        <label for="user-count">用户数量:</label>
        <input type="number" id="user-count" min="1" v-model.number="userCount">
        <button @click="generateData('user')">生成用户</button>
      </div>
      <div class="result">{{ userResult }}</div>
    </div>

    <div class="generator-container">
      <h2>生成班次数据</h2>
      <div class="input-group">
        <label for="shift-count">班次数量:</label>
        <input type="number" id="shift-count" min="1" v-model.number="shiftCount">
        <button @click="generateData('shift')">生成班次</button>
      </div>
      <div class="result">{{ shiftResult }}</div>
    </div>

    <div class="generator-container">
      <h2>生成场景数据</h2>
      <div class="input-group">
        <label for="scene-count">场景数量:</label>
        <input type="number" id="scene-count" min="1" v-model.number="sceneCount">
        <button @click="generateData('scene')">生成场景</button>
      </div>
      <div class="result">{{ sceneResult }}</div>
    </div>
  </div>
</template>

<script>
import api from '@/utils/axios.js';
const API_BASE = 'http://localhost:8080';

export default {
  data() {
    return {
      dataCount: 10,
      patrol_pointCount: 10,
      patrol_point_collectionCount: 10,
      equipmentCount: 10,
      officerCount: 10,
      userCount: 10,
      shiftCount: 10,
      sceneCount: 10,
      dataResult: '',
      patrol_pointResult: '',
      patrol_point_collectionResult: '',
      equipmentResult: '',
      officerResult: '',
      userResult: '',
      shiftResult: '',
      sceneResult: ''
    };
  },
  methods: {
    async generateData(type) {
      // 定义类型到变量名的映射
      const typeToCountProp = {
        'data': 'dataCount',
        'patrol-point': 'patrol_pointCount',
        'patrol-point-collection': 'patrol_point_collectionCount',
        'equipment': 'equipmentCount',
        'officer': 'officerCount',
        'user': 'userCount',
        'shift': 'shiftCount',
        'scene': 'sceneCount'
      };

      // 获取对应的变量名
      const countProp = typeToCountProp[type];

      // 如果映射不存在，使用默认的拼接方式
      const count = countProp ? this[countProp] : this[type + 'Count'];

      console.log("Type:", type);
      console.log("Count:", count);
      const resultProp = type + 'Result';

      this[resultProp] = '正在生成数据，请稍候...';

      try {
        const response = await api.get(`${API_BASE}/generate-${type}?count=${count}`);
        this[resultProp] = response.data;
      } catch (error) {
        this[resultProp] = `生成失败: ${error.message}`;
        console.log(error);
      }
    }
  }
};
</script>

<style>
body {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
h1 {
  text-align: center;
  color: #333;
}
.generator-container {
  margin-bottom: 20px;
}
.generator-container h2 {
  color: #555;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}
.input-group {
  margin-bottom: 10px;
}
label {
  display: inline-block;
  width: 120px;
  text-align: right;
  margin-right: 10px;
}
input[type="number"] {
  width: 100px;
  padding: 5px;
}
button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 8px 15px;
  cursor: pointer;
  margin-left: 10px;
  border-radius: 4px;
}
button:hover {
  background-color: #45a049;
}
.result {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
}
</style>
